What's new announcement?

Today

Big News

2 min ago

Able Pro is Redesigned

Able Pro is completely renowed with high aesthetics User Interface.

img
Offer

2 hour ago

Able Pro is in best offer price

Download Able Pro exclusive on themeforest with best price.

img

Yesterday

Blog

12 hour ago

Featured Dashboard Template

Do you know Able Pro is one of the featured dashboard template selected by Themeforest team.?

img
Announcement

12 hour ago

Buy Once - Get Free Updated lifetime

Get the lifetime free updates once you purchase the Able Pro.

img
DataTables Extensions

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options.

Reference
Basic Row Reorder
Note that sorting is enabled on all columns in this example - you may wish to restrict sorting to just the sequence column to help prevent potential user confusion if they reorder when the table ordering is performed on a different column.
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Full Row Selection
By default only the first cell in the row will trigger the reordering action. This example shows the entire row being able to start the reorder. Simply click and drag anywhere on the row
PositionOfficeAgeStart dateSalary
AccountantTokyo332008/11/28$162,700
Chief Executive Officer (CEO)London472009/10/09$1,200,000
Junior Technical AuthorSan Francisco662009/01/12$86,000
Software EngineerLondon412012/10/13$132,000
Software EngineerSan Francisco282011/06/07$206,850
Integration SpecialistNew York612012/12/02$372,000
Pre-Sales SupportNew York212011/12/12$106,450
Senior Javascript DeveloperEdinburgh222012/03/29$433,060
Regional DirectorSan Francisco362008/10/16$470,600
Javascript DeveloperSan Francisco392009/09/15$205,500
PositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Responsive Integration
This example shows RowReorder being used with the Responsive extension for DataTables and also that it provides support for touch inputs to perform a row reorder. Responsive is particularly useful with mobile devices, but can also be useful on desktops where complex data sets are shown in the DataTable.
NamePositionOfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Reorder Events
Providing the UI to allow end users to reorder a table is only half of the story - likely you will wish to have the changes caused by the end user to effect a database or some other data store.
PositionOfficeAgeStart dateSalary
AccountantTokyo332008/11/28$162,700
Chief Executive Officer (CEO)London472009/10/09$1,200,000
Junior Technical AuthorSan Francisco662009/01/12$86,000
Software EngineerLondon412012/10/13$132,000
Software EngineerSan Francisco282011/06/07$206,850
Integration SpecialistNew York612012/12/02$372,000
Pre-Sales SupportNew York212011/12/12$106,450
Senior Javascript DeveloperEdinburgh222012/03/29$433,060
Regional DirectorSan Francisco362008/10/16$470,600
Javascript DeveloperSan Francisco392009/09/15$205,500
PositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Buy Now
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Theme Contrast

    Choose theme contrast

  • Custom Theme

    Choose your primary theme color

  • Theme layout

    Choose your layout

  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout